@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style
{
    border-color: #5baa46;
}

#hpb-main .hpb-parts-hl-style
{
    border-color: #5baa46;
    background-image: none;
    clear: both;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
    font-size: 1.3em;
    color: #333;
    font-weight: normal;
    line-height: normal;
    height: auto;
    padding-left: 1px;
}

.hpb-parts-cbox-style
{
    border-color: #5baa46;
}

.hpb-parts-hr-style
{
    border-color: #5baa46;
}

.hpb-parts-pbox-style
{
    background-color: #ececec;
    border-color: #dddddd;
}
.hpb-parts-pbox-style h4
{
    padding: 0px !important;
    margin-left: 0px !important;
}
.hpb-parts-pbox-style img
{
    background-color: #ececec;
}

.hpb-parts-blist-style
{
    background-color: #fffed8;
    border-color: #98e2cf;
}
a.hpb-parts-blist-style:link
{
    color: #333;
}
a.hpb-parts-blist-style:visited
{
    color: #333;
}
a.hpb-parts-blist-style:hover
{
    background-color: #e2ffda;
}
a.hpb-parts-blist-style:active
{
    background-color: #e2ffda;
}

/*--------------------------------------------------------
  hpbparts
--------------------------------------------------------*/
/* 飾りなし 幅自動 */
.hpb-parts-cnt-01
{
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 5px;
}

/* 飾りなし 幅60px */
.hpb-parts-cnt-01-060
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅120px */
.hpb-parts-cnt-01-120
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅180px */
.hpb-parts-cnt-01-180
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅240px */
.hpb-parts-cnt-01-240
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅360px */
.hpb-parts-cnt-01-360
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅自動 */
.hpb-parts-cnt-02
{
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 5px;
}

/* 線囲み 幅60px */
.hpb-parts-cnt-02-060
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅120px */
.hpb-parts-cnt-02-120
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅180px */
.hpb-parts-cnt-02-180
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅240px */
.hpb-parts-cnt-02-240
{
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅360px */
.hpb-parts-cnt-02-360
{
    margin-bottom: 5px;
    padding: 5px;
}

/******************************
 * 見出し (h1-h6)
 ******************************/

/* 飾りなし */
.hpb-parts-hl-01
{
    margin-left: 0px !important;
}

/* 下線 1 */
.hpb-parts-hl-02
{
    margin-left: 0px !important;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03
{
    margin-left: 0px !important;
}

/* 線囲み 1 */
.hpb-parts-hl-04
{
    padding: 5px 0.2em 3px !important;
    margin-left: 0px !important;
    border-bottom-width: 3px !important;
    border-color: #ccc;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05
{
    padding: 5px 0.2em 3px !important;
    margin-left: 0px !important;
    border-color: #ccc !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06
{
    padding-left: 0.5em !important;
    margin-left: 0px !important;
    border-left-width: 0.5em !important;
    border-left-color: #5baa46 !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07
{
    padding-left: 0.5em !important;
    margin-left: 0px !important;
    border-left-width: 0.5em !important;
    border-left-color: #5baa46 !important;
    border-bottom-width: 1px !important;
    border-bottom-color: #ccc !important;
    border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08
{
    padding-top: 6px !important;
    padding-left: 0.5em !important;
    margin-left: 0px !important;
    border-left-width: 0.5em !important;
    border-left-color: #5baa46 !important;
    border-top-width: 1px !important;
    border-top-color: #ccc !important;
    border-top-style: dotted !important;
    border-bottom-width: 1px !important;
    border-bottom-color: #ccc !important;
    border-bottom-style: dotted !important;
    border-right-width: 1px !important;
    border-right-color: #ccc;
}

/******************************
 * 文章枠 (div)
 ******************************/

/* 装飾なし */
.hpb-parts-cbox-01
{
    margin-bottom: 5px;
    margin-right: 23px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02
{
    margin-bottom: 5px;
    margin-right: 23px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03
{
    margin-bottom: 5px;
    margin-right: 23px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04
{
    margin-bottom: 5px;
    margin-right: 23px;
}

/******************************
 * 写真/画像 (img)
 ******************************/

/* 余白なし */
.hpb-parts-img-01
{
}

/* 余白あり */
.hpb-parts-img-02
{
}

/* 写真ボックス 左寄せ配置用 */
.hpb-parts-img-03
{
}

/* 写真ボックス 右寄せ配置用 */
.hpb-parts-img-04
{
}

/* 複数写真ボックス 左端用 */
.hpb-parts-img-05
{
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06
{
}

/* 複数写真ボックス 左端・2行目用 */
.hpb-parts-img-07
{
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08
{
}

/******************************
 * 水平線 (hr)
 ******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01
{
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02
{
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03
{
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04
{
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05
{
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06
{
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07
{
}

/******************************
 * 写真ボックス (div)
 ******************************/

/* 飾りなし */
.hpb-parts-pbox-01
{
}

.hpb-parts-pbox-01 h4
{
    margin-bottom: 0.5em;
}

/* 飾りなし 画像幅60px */
.hpb-parts-pbox-01-060
{
}

/* 飾りなし 画像幅120px */
.hpb-parts-pbox-01-120
{
}

/* 飾りなし 画像幅180px */
.hpb-parts-pbox-01-180
{
}

/* 飾りなし 画像幅240px */
.hpb-parts-pbox-01-240
{
}

/* 線囲み */
.hpb-parts-pbox-02
{
}

.hpb-parts-pbox-02 h4
{
    margin-bottom: 0.5em;
}

/* 線囲み 画像幅60px */
.hpb-parts-pbox-02-060
{
}

/* 線囲み 画像幅120px */
.hpb-parts-pbox-02-120
{
}

/* 線囲み 画像幅180px */
.hpb-parts-pbox-02-180
{
}

/* 線囲み 画像幅240px */
.hpb-parts-pbox-02-240
{
}

/* 写真ボックス用 文章領域 */
.hpb-parts-pbox-desc
{
}

.hpb-parts-pbox-desc h4
{
    margin-bottom: 0.5em;
}

/******************************
 * 複数写真ボックス (div)
 ******************************/

/* 飾りなし 画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060
{
}

/* 飾りなし 画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060
{
}

/* 飾りなし 画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060
{
}

/* 飾りなし 画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120
{
}

/* 飾りなし 画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120
{
}

/* 飾りなし 画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120
{
}

/* 飾りなし 画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180
{
}

/* 飾りなし 画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180
{
}

/* 飾りなし 画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180
{
}

/* 飾りなし 画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240
{
}

/* 飾りなし 画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240
{
}

/* 飾りなし 画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240
{
}

/* 線囲み 画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060
{
}

/* 線囲み 画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060
{
}

/* 線囲み 画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060
{
}

/* 線囲み 画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120
{
}

/* 線囲み 画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120
{
}

/* 線囲み 画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120
{
}

/* 線囲み 画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180
{
}

/* 線囲み 画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180
{
}

/* 線囲み 画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180
{
}

/* 線囲み 画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240
{
}

/* 線囲み 画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240
{
}

/* 線囲み 画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240
{
}

/******************************
 * バナーリスト
 ******************************/

/* 文字型 1 */
.hpb-parts-blist-01
{
    clear: both;
}
.hpb-parts-blist-01 ul
{
    margin-bottom: 5px;
}
.hpb-parts-blist-01 li
{
    border-bottom: none !important;
    padding: 2px !important;
    padding-left: 0 !important;
    background-image: none !important;
}
.hpb-parts-blist-01 li a
{
    padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02
{
    clear: both;
}
.hpb-parts-blist-02 ul
{
    margin-bottom: 5px;
}
.hpb-parts-blist-02 li
{
    border-bottom: none !important;
    padding: 2px !important;
    padding-left: 0 !important;
    background-image: none !important;
}
.hpb-parts-blist-02 li a
{
    border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03
{
    clear: both;
}
.hpb-parts-blist-03 ul
{
    margin-bottom: 5px;
}
.hpb-parts-blist-03 li
{
    border-bottom: none !important;
    padding: 2px !important;
    padding-left: 0 !important;
    background-image: none !important;
}
.hpb-parts-blist-03 li a
{
    border-left-width: 1em;
    border-right-width: 1em;
    border-right-style: solid;
    border-top-style: dotted;
    border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04
{
}
.hpb-parts-blist-04 ul
{
    margin-bottom: 5px;
}
.hpb-parts-blist-04 li
{
    border-bottom: none !important;
    padding: 2px !important;
    padding-left: 0 !important;
    background-image: none !important;
}
.hpb-parts-blist-04 li a
{
}
.hpb-parts-blist-04 li a img
{
}

/* 画像付き 2 */
.hpb-parts-blist-05
{
}
.hpb-parts-blist-05 ul
{
}
.hpb-parts-blist-05 li
{
    border-bottom: none !important;
    padding: 2px !important;
    padding-left: 0 !important;
    background-image: none !important;
}
.hpb-parts-blist-05 li a
{
    border-style: dotted;
}
.hpb-parts-blist-05 li a img
{
}

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/

/* ===========================
   関係者専用ポータル（ヘッダー）
   =========================== */
#hpb-headerExtra1 .staff-portal-link{
  margin-top: 6px;
  text-align: right;
}

#hpb-headerExtra1 .staff-portal-link a{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #2f7d32;
  border-radius: 16px;
  background: #ffffff;
  color: #2f7d32;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  line-height: 1.2;
}

#hpb-headerExtra1 .staff-portal-link a:hover{
  background: #2f7d32;
  color: #ffffff;
}


/* ===========【】================ */

.product-links {
  text-align: center;
  margin: 40px 0;
}

.product-lead {
  color: #666;
  margin-bottom: 20px;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.product-card {
  width: 220px;
  padding: 18px;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.product-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.product-card span {
  font-size: 14px;
  display: block;
}

/* ★ CS30強調 */

.product-main {
  border: 2px solid #00aa00;
  background: #eaffea;
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* CTAボタン */

.cta {
  display: block;
  margin-top: 12px;
  padding: 10px;
  background: #c0db75 		/* #ff0000 6.1明るい赤 */
  color: #ffffff !important; 	/* ←強制白 */
  border-radius: 6px;
  font-weight: bold;
  font-size: 15px;
  text-align: center;

  letter-spacing: 0.5px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.product-card {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/*【cs30/cs80動画ボタン】*/

.img-box{
  position:relative;
  display:inline-block;
}

.video-btn{
  position:absolute;
  right:8px;
  bottom:8px;

  background:rgba(0,0,0,0.6);
  color:#fff;

  font-size:12px;
  padding:6px 10px;
  border-radius:6px;

  text-decoration:none;
}

/* ホバーで少し強調 */
.video-btn:hover{
  background:rgba(0,0,0,0.8);
}


/*【デバッグ用、枠を見えるように】*/

.img-box{
  border:2px solid red;
}
.img-box img{
  display:block;
  width:100%;
}

.img-box{
  width:260px;   /* ←実際の画像サイズに合わせる */
}

.video-btn{
  position:absolute;
  right:10px;
  bottom:10px;
}


/*【改良版】*/

.video-btn{
  position:absolute;
  right:10px;
  bottom:10px;

  background:rgba(0,0,0,0.75);  /* ←濃くする */
  color:#fff;

  font-size:12px;
  padding:6px 10px;
  border-radius:6px;

  text-decoration:none;
  font-weight:bold;
}



/*【少しおしゃれ】*/
.video-btn{
  position:absolute;
  right:10px;
  bottom:10px;

  background:rgba(0,0,0,0.85);
  color:#fff;

  font-size:12px;
  padding:6px 10px;
  border-radius:20px;

  text-decoration:none;
}

/*【押したくなる感UP】*/
.video-btn{
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}

/*【】*/

.img-box{
  position:relative;
  display:inline-block;
}

.img-box img{
  display:block;
  width:100%;
}

.video-btn{
  position:absolute;
  right:10px;
  bottom:10px;

  background:rgba(0,0,0,0.8);
  color:#fff;

  font-size:12px;
  padding:6px 10px;
  border-radius:6px;

  text-decoration:none;
  font-weight:bold;
}

/*【視認性の改善】*/

.video-btn{
  position:absolute;
  right:10px;
  bottom:10px;

  background:rgba(0,0,0,0.85);  	/* 濃くする */
  color:#fff !important;       		/* ←白文字 !important 必須*/

  font-size:12px;
  padding:6px 12px;
  border-radius:20px;          		/* 少し丸く */

  text-decoration:none;
  font-weight:bold;

  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}

/*【】*/

.img-box{
  position:relative;
  display:inline-block;
}

.img-box img{
  display:block;
  width:100%;
}

/*【HPB対抗版】*/

.img-box{
  position:relative;
  width:100%;
  height:auto;
}

.img-box img{
  display:block;
  width:100%;
  height:auto;
}

.video-btn{
  position:absolute !important;   /* ←HPB対策?? */

  right:8px !important;
  bottom:8px !important;

  background:rgba(0,0,0,0.85);
  color:#fff !important;

  font-size:12px;
  padding:6px 10px;
  border-radius:6px;

  text-decoration:none;
  font-weight:bold;

  z-index:10;   /* ←これ超重要?? */
}

/*【まだズレる場合（最終兵器??）】*/

.video-btn{
  transform:translate(-5px,-5px);
}

/*【】*/

.main-visual{
  position:relative;
  width:100%;
}

/* 共通 */

.video-btn{
  position:absolute;
  background:rgba(0,0,0,0.85);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
  z-index:10;
}

/* CS80位置 */
.video-btn.cs80{
  top:20%;
  left:55%;
}

/* CS30位置 */
.video-btn.cs30{
  top:60%;
  left:10%;
}

/*【見た目を“クリックされる形”に】*/

.lp-hero{
  text-align:center;
  padding:30px 20px;
}

.lp-hero h1{
  font-size:28px;
  font-weight:bold;
  margin-bottom:10px;
}

.lp-hero p{
  font-size:16px;
  margin-bottom:20px;
}

.cta-main{
  display:inline-block;
  background:#ffcc00;
  color:#000;
  padding:16px 28px;
  border-radius:10px;
  font-weight:bold;
  text-decoration:none;
  font-size:18px;
}

.cta-main:hover{
  background:#e6b800;
}

.cta-note{
  font-size:12px;
  color:#666;
  margin-top:8px;
}


/*【縦レイアウトに戻す】*/

.lp-hero{
  display:block !important;   /* ←これ重要 */
}

/*【】*/

.lp-hero ul{
  list-style:none;   /* ←これで・消える?? */
  padding-left:0;    /* ←左ズレ防止 */
}

/*【conceptのscroll化】*/

//.scroll-box{
//  height:120px;        		/* ←高さ指定が必須?? */
//  overflow-y:auto;     		/* ←縦スクロール */
//  border:1px solid #ccc;	
//  padding:10px;
//}


.scroll-box{
  height:120px;			/* ←高さ指定が必須?? */
  overflow-y:auto;		/* ←縦スクロール */
  background:#f9f9f9;
  border-radius:8px;
  padding:15px;
}

/*【】*/